<template>
  <div class="home">
    主页
    <el-input v-model="input" @input="handleserach" placeholder="请输入内容"></el-input>
    <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      fixed
      prop="name"
      label="商品名称"
      width="150">
    </el-table-column>
    <el-table-column
      prop="count"
      label="商品编号"
      >
    </el-table-column>
    <el-table-column
      prop="size"
      label="规格"
      >
    </el-table-column>
    <el-table-column
      prop="type"
      label="类型">
    </el-table-column>
    <el-table-column
      prop="isup"
      label="状态"
      >
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="200">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">详情</el-button>
        <el-button type="text" size="small" @click="edits(scope.row.id)" >编辑</el-button>
        <el-button type="text" size="small" @click="deletItem(scope.row.id)" >删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    layout="prev, pager, next"
    @current-change="handleCurrentChange"
    :total="total">
  </el-pagination>
  <el-drawer
  title="编辑"
  :visible.sync="drawer"
  :with-header="false">
  <p>编辑上架状态</p>
   <el-select v-model="label" @change='submitEdit' placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.label">
    </el-option>
  </el-select>
</el-drawer>
  </div>
</template>

<script>

import axios from "../utils/request"
export default {
  name: 'Home',
  data(){
    return{
      input: '',
      tableData: [],
      total:0,
      drawer: false,
      options: [{
          value: '选项1',
          label: '上架'
        }, {
          value: '选项2',
          label: '下架'
        }, ],
      label: '',
      itemId:null
      }
    },
    methods:{
      async http(pageIndex=0,pageSize=5){
        const res=await axios.get('/list',{
          params:{
            pageIndex,
            pageSize,
            values:this.input
          }
        })
        this.tableData=res.data.data
        this.total=res.data.total
      },
      handleserach(){
        this.http()
      },
      handleCurrentChange(index){
          this.http(index)
      },
      edits(id){
        this.drawer=true
        this.itemId=id
      },
      async editlist(id){
        const res=await axios.put('/editlist',{
          id,
          isup:this.label
        })
        const {code,mes}=res.data
        if(code===200){
          this.$notify.success(mes)
        }else{
          this.$notify.error(mes)
        }
      },
      submitEdit(){
        this.editlist(this.itemId)
        this.http()
        // console.log(this.label)
        // console.log(this.itemId)
      },
      async dellist(id){
        const res=await axios.delete('/dellist',{
          params:{
            id:id
          }
        })
        const {code,mes}=res.data
        if(code===200){
          this.$notify.success(mes)
        }else{
          this.$notify.error(mes)
        }
      },
      deletItem(id){
        this.dellist(id)
        this.http()
      }
    },
    created(){
      this.http()
    }
    
}
</script>
